<template>
  <div class="homeCard">
    <div class="title">{{ title }}</div>
    <div class="date">{{ data.dateStart + " - " + data.dateEnd }}</div>
    <div class="content">
      {{ data.num }}
      <span> {{ data.unit }}</span>
    </div>
    <div :class="'mark mark' + index"></div>
  </div>
</template>

<script>
export default {
  name: "homeCard",
  components: {},
  props: {
    data: {
      type: Object,
      default: () => { },
    },
    title: {
      type: String,
      default: "",
    },
    index: {
      type: Number,
      default: 0,
    },
  },
  mounted() { },
  data() {
    return {

    };
  },
  methods: {},
  computed: {},
};
</script>

<style scope lang="less">
.homeCard {
  border-radius: 8px;
  background: #fff;
  padding: 20px 16px;
  box-shadow: 0 2px 26px 0 rgba(0, 0, 0, 0.06);
  position: relative;
  .title {
    font-size: 16px;
    font-weight: 600;
    color: #666;
  }
  .date {
    font-size: 12px;
    font-weight: 400;
    color: #999;
  }
  .content {
    font-size: 24px;
    font-weight: 600;
    color: #666;
    margin-top: 15px;
    span {
      font-size: 12px;
      font-weight: 400;
    }
  }
  .mark {
    border-radius: 50%;
    width: 20px;
    height: 20px;
    position: absolute;
    bottom: 20px;
    right: 20px;
    &::before {
      content: "";
      display: block;
      position: absolute;
      width: 10px;
      height: 10px;
      border-radius: 50%;
      overflow: hidden;
      background: #fff;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
    }
    &::after {
      content: "";
      display: block;
      position: absolute;
      width: 4px;
      height: 4px;
      border-radius: 50%;
      overflow: hidden;
      background: #fff;
      border: 1.5px solid #68f1a6;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
    }

    &.mark0 {
      background: linear-gradient(135deg, #68f1a6 0%, #52dae7 100%);
      box-shadow: 0 2px 12px 0 #68f1a6;
      border: 1.5px solid #68f1a6;
      &::after {
        border: 1.5px solid #68f1a6;
      }
    }
    &.mark1 {
      background: linear-gradient(135deg, #f79baa 0%, #f56286 100%);
      box-shadow: 0 2px 12px 0 #f79baa;
      &::after {
        border: 1.5px solid #f79baa;
      }
    }
    &.mark2 {
      background: linear-gradient(135deg, #b3b4f5 0%, #a26cf8 100%);
      box-shadow: 0 2px 12px 0 #b3b4f5;
      &::after {
        border: 1.5px solid #b3b4f5;
      }
    }
    &.mark3 {
      background: linear-gradient(135deg, #fbdfaf 0%, #f89156 100%);
      box-shadow: 0 2px 12px 0 #fbdfaf;
      &::after {
        border: 1.5px solid #fbdfaf;
      }
    }
  }
}
</style>
